<style lang="less" scoped>
    .quality {
        width: 100%;
        height: auto;
        overflow: hidden;
        text-align: center;
        padding: 8px;
        display: flex;
       .qualitycard{
           width: 100%;
       }
    }
</style>
<template>
    <div class="quality">
        <Card class="qualitycard">
            <Tabs value="name1">
                <TabPane label="质检问题" name="name1">
                    <card-table
                        cardtitle=""
                        addbuttext="新建质检问题"
                        :columns="columns"
                        :selectList="selectList"
                        :defaultSelete="defaultSelete"
                        :searchForm="searchForm"
                        :formItem="formItem"
                        @add="add"
                        @refresh="refresh"
                        @on-current-change="onCurrentChange"
                        :data="data">
                    </card-table>
                </TabPane>
                <TabPane label="客诉信息" name="name2">
                    <card-table
                        cardtitle=""
                        addbuttext="新建客诉信息"
                        :columns="columns2"
                        :selectList="selectList"
                        :defaultSelete="defaultSelete"
                        :searchForm="searchForm2"
                        :formItem="formItem"
                        @add="add"
                        @refresh="refresh"
                        @on-current-change="onCurrentChange"
                        :data="data2">
                    </card-table>
                </TabPane>
            </Tabs>
        </Card>
    </div>
</template>
<script>
    import CardTable from '../components/cardTable.vue'
    import MyCard from '../components/myCard.vue'
    import qualitydata from './qualitydata.js'
    import qualitydata2 from './qualitydata2.js'
    export default {
        name: 'quality',
        data () {
            return {
                columns: [
                    {
                        title: '工单编号',
                        key: 'nub',
                        width: 160
                    },
                    {
                        title: '质检人',
                        key: 'user',
                        width: 120
                    },
                    {
                        title: '质检信息',
                        key: 'msg'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        render: (h, params) => {
                            return h('Button', {
                                props: {
                                    type: 'text'
                                },
                                style: {
                                    marginRight: '5px'
                                }
                            }, '编辑');
                        }
                    }
                ],  //  表格列
                columns2: [
                    {
                        title: '订单编号',
                        key: 'nub',
                        width: 160
                    },
                    {
                        title: '提交人',
                        key: 'user',
                        width: 120
                    },
                    {
                        title: '客诉信息',
                        key: 'msg'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        render: (h, params) => {
                            return h('Button', {
                                props: {
                                    type: 'text'
                                },
                                style: {
                                    marginRight: '5px'
                                }
                            }, '编辑');
                        }
                    }
                ],  //  表格列
                data: qualitydata,  //  表格数据
                data2: qualitydata2,  //  表格数据
                selectList: [
                    {
                        label: '编号',
                        value: 'nub'
                    },
                    {
                        label: '提交人',
                        value: 'user'
                    },
                    {
                        label: '提交信息',
                        value: 'msg'
                    }
                ],  //  搜索下拉列表
                defaultSelete: 'nub',  //  搜索下拉列表默认值
                searchForm: {
                    'nub': '',
                    'user': '',
                    'msg': ''
                },  //  搜索下拉列表默认值
                searchForm2: {
                    'nub': '',
                    'user': '',
                    'msg': ''
                },  //  表单初始值
                formItem: [
                    {
                        label: '编号',
                        key: 'nub',
                        placeholder: '输入编号'
                    },
                    {
                        label: '提交人',
                        key: 'user',
                        placeholder: '输入提交人'
                    },
                    {
                        label: '信息',
                        key: 'msg',
                        placeholder: '输入品质信息'
                    }
                ],  //  搜索表单item
                current: null
            }
        },
        methods: {
            add () {
                console.log('customer触发了添加事件')
            },
            refresh () {
                console.log('customer触发了刷新事件')
            },
            onCurrentChange (current) {
                console.log(current)
                this.current = current
            },
            ddxqclick () { //  订单详情按钮
                console.log('订单详情')
            },
            gdclick () { //  工单列表查看按钮
                console.log('工单列表查看')
            }
        },
        components: {
            CardTable,
            MyCard
        },
        mounted: function () {
            console.log('customer被初始化了')
        }
    };
</script>
